<template>
    <el-date-picker v-model="timeDate" :placeholder="placeholder" :format="valueFormat" :value-format="valueFormat"
        align="center" :type="datePickerType" :picker-options="showPickerOptionsType" :editable="false" @change="selectDate"
        :class="full ? 'full-box-class' : ''" />
</template>

<script>
export default {
    name: 'date-pickers',
    props: {
        // 提示语
        placeholder: {
            type: String,
            default: '请选择日期',
        },
        // 是否显示快捷选项
        showPickerOptions: {
            type: Boolean,
            default: false,
        },
        valueFormat: {
            type: String,
            default: 'yyyy-MM-dd',
        },
        setDefaultValue: {
            type: Boolean,
            default: false,
        },
        full: {
            type: Boolean,
            default: false,
        },
        value: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            timeDate: '',
            // 单时间选择器
            // 时间选择器 --天
            pickerOptionsDay: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date())
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            let date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24)
                            picker.$emit('pick', date)
                        }
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            let date = new Date()
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                            picker.$emit('pick', date)
                        }
                    },
                    {
                        text: '一个月前',
                        onClick(picker) {
                            const time = new Date()
                            time.setMonth(time.getMonth() - 1)
                            picker.$emit('pick', time)
                        }
                    },
                    {
                        text: '三个月前',
                        onClick(picker) {
                            const time = new Date()
                            time.setMonth(time.getMonth() - 3)
                            picker.$emit('pick', time)
                        }
                    }
                ]
            },
            // 时间选择器 --月
            pickerOptionsMonth: {
                shortcuts: [
                    {
                        text: '本月',
                        onClick(picker) {
                            picker.$emit('pick', new Date())
                        }
                    },
                    {
                        text: '上月',
                        onClick(picker) {
                            const time = new Date()
                            time.setMonth(time.getMonth() - 1)
                            picker.$emit('pick', time)
                        }
                    },
                    {
                        text: '三个月前',
                        onClick(picker) {
                            const time = new Date()
                            time.setMonth(time.getMonth() - 3)
                            picker.$emit('pick', time)
                        }
                    }
                ]
            },
            // 时间选择器 --年
            pickerOptionsYear: {
                shortcuts: [
                    {
                        text: '今年',
                        onClick(picker) {
                            picker.$emit('pick', new Date())
                        }
                    },
                    {
                        text: '去年',
                        onClick(picker) {
                            let date = new Date()
                            date.setFullYear(date.getFullYear() - 1)
                            picker.$emit('pick', date)
                        }
                    },
                    {
                        text: '前年',
                        onClick(picker) {
                            let date = new Date()
                            date.setFullYear(date.getFullYear() - 2)
                            picker.$emit('pick', date)
                        }
                    }
                ]
            }
        }
    },
    computed: {
        showPickerOptionsType() {
            if (!this.showPickerOptions) return []
            let valueFormatArr = this.valueFormat.split('-')
            if (valueFormatArr.length == 3) {
                // 年月日
                return this.pickerOptionsDay
            } else if (valueFormatArr.length == 2) {
                // 年月
                return this.pickerOptionsMonth
            } else if (valueFormatArr.length == 1) {
                // 年
                return this.pickerOptionsYear
            } else {
                return []
            }
        },
        datePickerType() {
            let length = this.valueFormat.split('-').length
            let type = length == 3 ? 'date' : length == 2 ? 'month' : length == 1 ? 'year' : 'date'
            return type
        }
    },
    watch: {
        value(value) {
            this.timeDate = value
        }
    },
    created() {
        if (this.setDefaultValue) {
            let valueFormatArr = this.valueFormat.split('-')
            let date = new Date()
            let year = date.getFullYear()
            let month = String(date.getMonth() + 1).padStart(2, '0')
            let day = String(date.getDate()).padStart(2, '0')
            let defaultDate = ''
            if (valueFormatArr.length == 1) {
                defaultDate = `${year}`
            } else if (valueFormatArr.length == 2) {
                defaultDate = `${year}-${month}`
            } else if (valueFormatArr.length == 3) {
                defaultDate = `${year}-${month}-${day}`
            }
            this.$emit('input', defaultDate)
        }
    },
    methods: {
        selectDate(date) {
            this.$emit('input', date)
        },
    },
}
</script>

<style scoped lang="scss">
.full-box-class {
    width: 100% !important;
}
</style>